<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="/static/css/index.css" rel="stylesheet">
<title>考勤管理</title>
</head>
<body>

<div class="inner-title">
	<h3 class="fn f14"><img src="/static/images/icon-1.png" alt="" /> 考勤管理</h3>
</div>

<div class="inner-cont">
	<div class="bgf2 creat-wrap">
		<button class="creat-btn cf" id="setting" onclick="setting();" ><img src="/static/images/icon-add.png" alt="" /> 考勤设置</button>
		<div align="right" id="sel">年份<input type="text" id="y" />月份 <input
				type="text" id="m" />
			<button type="button" onclick="select();" class="creat-btn cf">查询</button>
				<button type="button" onclick="getAttendanceRecordtoEecel();" class="creat-btn cf">导出数据</button>
			</div>
	</div>
	
	<div class="mt30">
		<table border="0"class="table">
			<tr>
				<th 	>序号</th>
				<th width="500">姓名</th>
				<th width="500">年月</th>
				<th width="500">本月工作日天数</th>
				<th width="300">应打卡次数</th>
				<th width="500">实际打卡次数</th>
				<th width="500">迟到次数</th>
				<th width="200">早退次数</th>
				<th width="200">缺勤次数</th>
				<th width="200">操作</th>
			</tr>
			
			<tbody id="table">
			</tbody>
		</table>
		<div align="center" style="font-size: 18px; color: gray" id="page">

		</div>
	</div>
	
</div>


<!-- 弹窗 -->
<div class="pop pa bgf5 hide" style="width: 500px">
	<span class="pa pop-shut"></span>
	<h3 class="cf pop-title">考勤设置</h3>
	<div class="pop-cont">
		<form action="/web/attendanceSetting" method="post" class="form form-2 f14" id="form">
			<table class="dialog-table">
		        <tr id="esn">
		            <td>上班时间</td>
		            <td><select name="attendanceTime" id="attendanceTime">
						<option>请选择</option>
						<option id="1" value="8:00">8:00</option>
						<option id="2" value="8:30">8:30</option>
						<option id="3" value="9:00">9:00</option>
						<option id="4" value="9:30">9:30</option>
						<option id="5" value="10:00">10:00</option>
				</select></td>
		            <td></td>
		        </tr>
		        <tr>
		            <td>下班时间</td>
		            <td>
		            	<select name="closingTime">
						<option>请选择</option>
						<option value="18:00" id="6">18:00</option>
						<option value="18:30" id="7">18:30</option>
						<option value="19:00" id="8">19:00</option>
						<option value="19:30" id="9">19:30</option>
						<option value="20:00" id="10">20:00</option>
				</select>
		            </td>
		            <td></td>
		        </tr>
		        <tr>
		            <td>工作日</td>
		            <td><input type="checkbox"
					id="day1" name="workday" value="1">星期一</input> <input
					type="checkbox" id="day2" name="workday" value="2">星期二</input> <input
					type="checkbox" id="day3" name="workday" value="3">星期三</input> <input
					type="checkbox" id="day4" name="workday" value="4">星期四</input> <input
					type="checkbox" id="day5" name="workday" value="5">星期五</input> <input
					type="checkbox" id="day6" name="workday" value="6">星期六</input> <input
					type="checkbox" id="day7" name="workday" value="7">星期日</input></td>
		        </tr>
		        
		        <tr>
		            <td></td>
		            <td><button id="btn_modifyOrCreate">提交</button></td>
		            <td></td>
		        </tr>
		    </table>
			 <div align="center" style="font-size: 18px;color: gray" id="page" >
				
			</div>
		</form>
	</div>
</div>




<script src="/static/js/jquery.js" type="text/javascript"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<script type="text/javascript">
var y;
var m;
var count=0;
$(function(){
	var uIdentity=[[${session.user.uIdentity}]];
	$('.pop-shut').on('click', function(e) {
		$(this).parent().hide();
	})
	if(uIdentity!=1){
		$("#setting").remove();
	}
	var nowDate = new Date();

	 var year = nowDate.getFullYear();

	 var month = nowDate.getMonth() + 1 < 10 ?  (nowDate.getMonth() + 1)

	  : nowDate.getMonth() + 1;

	$.ajax({
		url:"/web/getAttendanceRecord/"+year+"/"+month,
		success:function(response){
		if(response.success){
			$.each(response.data,function(i,eq){
					count++;
					$("#table").append('<tr ><td >'+count+'</td><td >'+eq.uName+'</td><td >'+eq.date+'</td><td >'+eq.workDayNum+'</td><td >'+eq.oughtToAttendanceNum+'</td><td >'+eq.virtualAttendanceNum+'</td><td >'+eq.beLateNum+'</td><td >'+eq.leaveEarlyNum+'</td><td>'+eq.absenceFromDutyNum+'</td><td><a href="/web/getAttendanceRecordByUid/'+eq.uId+'/'+year+'/'+month+'"><img  src="/static/images/icon-2.png" title="查看详情" style="cursor:pointer;"/></a></tr>');
					
			});
			
		}
	},error:function(){
		alert("出现未知错误,请联系站内管理员!");
	}
		
	});
	$("#y").blur('input propertychange', function()
			{
			  y=$("#y").val();
			  
			});
	$("#m").blur('input propertychange', function()
			{
			  m=$("#m").val();
			  
			});
	if([[${session.user.uIdentity}]]==3){
		$("#sel ").remove();
	}
});



function select () {
	count=0
	$("#table").empty();
	if(y==null||y==""&&m==null||m==""){
		var nowDate = new Date();

		 y = nowDate.getFullYear();

		 m = nowDate.getMonth() + 1 < 10 ?  (nowDate.getMonth() + 1)

		  : nowDate.getMonth() + 1;
	}
	if(y==null||y==""){
		var nowDate = new Date();

		 y = nowDate.getFullYear();
	}
	if(m==null||m==""){
		var nowDate = new Date();


		 m = nowDate.getMonth() + 1 < 10 ?  (nowDate.getMonth() + 1)

		  : nowDate.getMonth() + 1;
	}
	$.ajax({
		url:"/web/getAttendanceRecord/"+y+"/"+m,
		success:function(response){
		if(response.success){
			$.each(response.data,function(i,eq){
					count++;
					$("#table").append('<tr ><td >'+count+'</td><td >'+eq.uName+'</td><td >'+eq.date+'</td><td >'+eq.workDayNum+'</td><td >'+eq.oughtToAttendanceNum+'</td><td >'+eq.virtualAttendanceNum+'</td><td >'+eq.beLateNum+'</td><td >'+eq.leaveEarlyNum+'</td><td>'+eq.absenceFromDutyNum+'</td><td><a href="/web/getAttendanceRecordByUid/'+eq.uId+'/'+y+'/'+m+'"><img  src="/static/images/icon-2.png" title="查看详情" style="cursor:pointer;"/></a></tr>');
					
			});
			
		}
		}
	});
	
	
}
function getAttendanceRecordtoEecel() {
	if(y==null||y==""&&m==null||m==""){
		var nowDate = new Date();

		 var year = nowDate.getFullYear();

		 var month = nowDate.getMonth() + 1 < 10 ?  (nowDate.getMonth() + 1)

		  : nowDate.getMonth() + 1;
		 location.href="/web/getAttendanceRecordtoEecel/"+year+"/"+month;
	}else{
	location.href="/web/getAttendanceRecordtoEecel/"+y+"/"+m;
	}
}
function setting() {
	$.ajax({
		url : "/web/getAttendanceSetting",
		success : function(response) {
			if (response.success) {
				if (response.data != null) {
					if (response.data.workday != null) {
						var workday = response.data.workday;
						var arr = new Array();
						var le = workday.length;
						if (workday.length == 1) {
							$("#day" + response.data.workday).attr(
									"checked", "checked");
						} else {
							arr = workday.split('-');
							for (var i = 0; i < arr.length; i++) {
								$("#day" + arr[i]).attr("checked",
										"checked");

							}
						}

					}
					var attendanceTime = response.data.attendanceTime;
					var attendanceTimeId = 0;
					if (attendanceTime == "8:00") {
						attendanceTimeId = 1;
					} else if (attendanceTime == "8:30") {
						attendanceTimeId = 2;
					} else if (attendanceTime == "9:00") {
						attendanceTimeId = 3;
					} else if (attendanceTime == "9:30") {
						attendanceTimeId = 4;
					} else if (attendanceTime == "10:00") {
						attendanceTimeId = 5;
					}
					$("#" + attendanceTimeId).attr("selected", true);
					var closingTime = response.data.closingTime;
					var closingTimeId = 0;
					if (closingTime == "18:00") {
						closingTimeId = 6;
					} else if (closingTime == "18:30") {
						closingTimeId = 7;
					} else if (closingTime == "19:00") {
						closingTimeId = 8;
					} else if (closingTime == "19:30") {
						closingTimeId = 9;
					} else if (closingTime == "20:00") {
						closingTimeId = 10;
					}
					$("#" + closingTimeId).attr("selected", true);
				}
			}
		}
	});
	$('.pop').show();
}
</script>
</body>
</html>